<template>
  <div class="goods-list">
    <!-- 在网页中，有两种跳转方式： -->
    <!-- 方式1： 使用 a 标签 的形式叫做 标签跳转  -->
    <!-- 方式2： 使用 window.location.href 的形式，叫做 编程式导航 -->
    <router-link class="goods-item" v-for="item in list" :key="item.id" to="/home/goodsinfo" tag="div">
      <img :src="item.imgurl" alt="">
      <!-- <h1 class="title"></h1> -->
      <div class="info">
        <!-- <p class="price">
          <span class="now"></span>
          <span class="old"></span>
        </p> -->
        <p class="sell">
          <span>{{item.title}}</span>
          <span>热卖中</span>
          <span>剩件</span>
        </p>
      </div>
    </router-link>

    <mt-button type="danger" size="large" >加载更多</mt-button>
  </div>
</template>
<script>
export default {
    data(){
        // data 是往自己组件内部，挂载一些私有数据的
        return {
            list:[]
        }
    },
    created(){
        this.getgoodslist();
    },
    methods:{
        getgoodslist(){
            this.$http.get("https://api.oioweb.cn/api/biying.php").then(result=>{
                this.list=result.body.data;
            });
        }
    }
};
</script>
<style scoped>
.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  justify-content: space-between;
}
/* .sell {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
} */
.old {
  text-decoration: line-through;
  font-size: 12px;
  margin-left: 10px;
}
.now {
  color: red;
  font-weight: bold;
  font-size: 16px;
}
p {
  margin: 0;
  padding: 5px;
}
.info {
  background-color: #eee;
  vertical-align:top;
}
.title {
  font-size: 14px;
}
img {
  width: 100%;
  min-height: 200px;
}
.goods-item {
  width: 49%;
  border: 1px solid #ccc;
  box-shadow: 0 0 8px #ccc;
  margin: 4px 0;
  padding: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 293px;
  background-color: #eee;
}
</style>